
<div id="slider" class="nivoSlider">
	<?php foreach ($this->imgs as $key =>$img):?>
		<a href="" class="imageLink <?php if($key ==0) echo "style = 'display:none'" ?>"  onclick="return false">
            <img src="<?php echo $this->baseUrl()."/".$img['image']?>" alt="" title="" style="width: 380px ;height:180px; border:0px;">
		</a>
	<?php endforeach;?>
	<div class = "next" onclick = "nextImage()">
		
	</div>
	<div class = "prev" onclick = "prevImage()" >
		
	</div>
	
</div>
<script>
	
	var time = 10000;
	function switchImage(){
		var activeImage = $(".imageLink.active").get(0);
		var index = $(".imageLink").index(activeImage);
		$($(".imageLink").get((index+1)%$(".imageLink").length)).addClass("active");
		$(activeImage).removeClass("active");
		$($(".imageLink").get((index+1)%$(".imageLink").length)).fadeIn("slow");
		$(activeImage).fadeOut("slow");;
		nextSlide = setTimeout(switchImage,time);
	}
	function nextImage(){
		var activeImage = $(".imageLink.active").get(0);
		var index = $(".imageLink").index(activeImage);
		$($(".imageLink").get((index+1)%$(".imageLink").length)).addClass("active");
		$(activeImage).removeClass("active");
		$($(".imageLink").get((index+1)%$(".imageLink").length)).fadeIn(1000);
		$(activeImage).fadeOut(1000);;
		window.clearTimeout(nextSlide);
		nextSlide = setTimeout(switchImage,time);
	}
	function prevImage(){
		var activeImage = $(".imageLink.active").get(0);
		var index = $(".imageLink").index(activeImage);
		$($(".imageLink").get((index-1)%$(".imageLink").length)).addClass("active");
		$(activeImage).removeClass("active");
		$($(".imageLink").get((index-1)%$(".imageLink").length)).fadeIn(1000);
		$(activeImage).fadeOut(1000);;
		window.clearTimeout(nextSlide);
		nextSlide = setTimeout(switchImage,time);
	}
	$(".imageLink:first").addClass("active");
	switchImage();
</script>